<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.container {
				width: 800px;
				margin: 0 auto;
				margin-top: 100px;
				padding: 30px 0;
				border: 1px dashed #272627;
			}
			
			.test {
				width: 100%;
				padding: 10px 0;
				margin: 20px 0;
				color: #4bade8;
				font-size: 18px;
				text-align: center;
			}
			
			#jsonTable {
				width: 500px;
				margin: 0 auto;
			}
			
			#jsonTable th,
			td {
				padding: 6px 0;
				line-height: 30px;
				text-align: center;
			}
		</style>
	</head>
 
	<body>
		<div class="container">
			<div class="test">获取模拟json数据</div>
			<table border="1" cellspacing="0" bordercolor="#4bade8" cellpadding="0" id="jsonTable">
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</table>
		</div>
 
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				getDate();
 
				function getDate() {
					var temp = '';
					$.ajax({
						type: "get",
						url: "queryList.json",
						dataType: "json",
						success: function(res) {
							var list = res.animals
							console.log(list)
							for(var $i = 0; $i < list.length; $i++) {
								temp +=
									'<tr>' +
									'<td>' + list[$i].id + '</td>' +
									'<td>' + list[$i].name + '</td>' +
									'<td>' + list[$i].age + '</td>' +
									'</tr>';
							}
							$("#jsonTable tr:not(:first)").html(""); /*  除了第一行tr的内容，其余内容清空，防止获取重复的数据  */
							$("#jsonTable").append(temp);
						}
					});
				}
			});
		</script>
	</body>
</html>
